<template>
  <view>
    <BaseNavbar :title="title" />

    <BaseSearch :showScan="true" type-img="place" @onClickIcon="onClickIcon" @search="search" @onClickScan="onClickScan"
      placeholder="请输入设备编号" />
    <view class="tabs">
      <!-- <BaseSroll height="44" :list="tabList" name="label" :current="curTabIndex" @change="tabChange" /> -->
      <BaseTabs height="44" :list="tabList" name="label" :is-scroll="true" :isShowBar="false" :current="curTabIndex" @change="tabChange" />
    </view>
    <view class="linbuttom"></view>
    <BaseDropdown :options-list="optionsList" @change="changeDropdown" :num="total" />
    <ComList :loading-type="loadingType">
      <ReplenishListCard @updataTime="updataTime(item)" v-for="(item, index) in listData" :key="index" :info="item"
        :status="optionsList[0].value" />
    </ComList>
    <!-- 筛选 -->
    <BasePopup :show.sync="isShowPopup" mode="top" :customStyle="{
      top: 110 + vStatusBarHeight + vNavBarHeight + 'rpx',
    }">
      <DeviceScreener ref="DeviceScreener" @confirm="confirmScreenner"></DeviceScreener>
    </BasePopup>
  </view>
</template>

<script>
import BaseNavbar from "@/components/base/BaseNavbar.vue";
import BaseSearch from "@/components/base/BaseSearch.vue";
import BaseTabs from "@/components/base/BaseTabs.vue";

import BaseDropdown from "@/components/base/BaseDropdown.vue";
import ComList from "@/components/list/ComList.vue";
import ReplenishListCard from "../components/cards/ReplenishListCard.vue";
import myPull from "@/mixins/myPull";
import BasePopup from "../../components/base/BasePopup.vue";
import { getUrlDynamicData } from "@/common/tools/utils.js";
import DeviceScreener from "../components/screener/DeviceScreener.vue";
import { subtractDaysAndFormat } from "@/wxutil/times";
export default {
  components: {
    BaseNavbar,
    BaseSearch,
    BaseDropdown,
    ComList,
    ReplenishListCard,
    BaseTabs,
    BasePopup,
    DeviceScreener,
 
  },
  data() {
    return {
      title: "水电管理",
      tabList: [
        { label: "全部", value: 0, status: 0 },

        {
          label: "缺水",
          value: 1,
          status: 1,
        },
        {
          label: "缺电",
          value: 2,
          status: 2,
        },
        {
          label: "禁用",
          value: 3,
          status: 4,
        },
        // {
        //   label: "使用中",
        //   value: 4,
        //   status: 5,
        // },
        {
          label: "离线",
          value: 4,
          status: 6,
        }, {
          label: "3天未成交",
          value: 5,
          status: 3,
        }, {
          label: "7天未成交",
          value: 6,
          status: 7,
        }, {
          label: "30天未成交",
          value: 7,
          status: 30,
        },

      ],
      optionsList: [
        {
          title: "全部",
          options: [
            { label: "全部", value: 0, status: 0 },

            {
              label: "缺水",
              value: 1,
              status: 5,
            },

            {
              label: "缺电",
              value: 2,
              status: 2,
            },
            {
              label: "禁用",
              value: 3,
              status: 4,
            },

            // {
            //   label: "使用中",
            //   value: 4,
            //   status: 5,
            // },
            {
              label: "离线",
              value: 4,
              status: 6,
            }, {
              label: "3天未成交",
              value: 5,
              status: 3,
            }, {
              label: "7天未成交",
              value: 6,
              status: 7,
            }, {
              label: "30天未成交",
              value: 7,
              status: 30,
            },

          ],
          value: 0,
        },
      ],
      total: 0,
      isShowPopup: false,
      device_sn: "",
      room_num: null,
      dianwei: 0,
      status: 0,
      isstatus: "",
      owner: "", //上级账号
      isPageUnloaded: false,
      curTabIndex: 0,
      items: {},
      lastest_order_time: ''


    };
  },
  methods: {
    loading(title, isShowLoading) {

      if (isShowLoading) {
        console.log('进来了')
        uni.showLoading({
          title,
          mask: true,
        })
      } else {
        uni.hideLoading()
      }
    },
    /* 更新时间 */
    async updataTime(item) {

      console.log(item)
      let parames = {
        device_sn: item.device_sn
      }
      let data = await this.$u.api.getAllStatus(parames)
      setTimeout(() => {
        this.loading('更新中', true)
      }, 100)
      setTimeout(() => {

        this.$u.api.getUMDetail(parames).then(res => {
          console.log('获取成功', res)
          this.items = item

          let index = this.listData.findIndex((items) => items.id === this.items.id); // 查找id为2的元素索引
          if (index !== -1) {
            // 如果找到了
            this.items.report_time = res.report_time
            this.items.light_status = res.light_status
            this.items.tip_music = res.tip_music
            this.items.electricity = res.electricity
            this.items.remain_game_time = res.remain_game_time
            this.items.electricity_status = res.electricity_status
            console.log('找到相同的', this.listData[index], this.items.use_status)
            this.listData.splice(index, 1, this.items);
            this.loading()
          }
        })
          .catch(err => {
            console.log('错误', err)
          })
      }, 3000)

    },
    tabChange(e, item) {
      console.log("点击了Tbas", e, item);
      this.curTabIndex = e;
      let data = this.optionsList[0]
      data.value = e
      data.title =
        this.optionsList[0].options[e].label;
      console.log('tab切换', data)
      let datalist = []
      datalist[0] = data
      this.changeDropdown(datalist)
    },
    getList(page, done) {

      let data = {
        device_sn: this.device_sn,
        room_num: this.room_num,
        status: this.status, // 是否在线
        hotel_id: this.dianwei,
        owner: this.owner, //上级账号
        lastest_order_time: this.lastest_order_time,
        page,
      };

      if (this.isstatus == 0) {
        this.status = 0

        // data['game_doing']=0
      } else if (this.isstatus == 5) {
        data['game_time'] = 30
      }
      else if (this.isstatus == 2) {
        data['electricity'] = 0
      }
      else if (this.isstatus == 4) {
        data['use_status'] = 2
      }

      else if (this.isstatus == 6) {
        data['status'] = 3
      }

      this.$u.api.getBindHotelUMs(data).then((res) => {
        if (res.machine.length > 0) this.total = res.machine[0].Total;
        console.log('补货列表信息', res)
        done(res.data);
      });
    },
    changeDropdown(item) {
      console.log('下拉选择', item)
      this.optionsList = item;
      let index = item[0].value;
      this.isstatus = item[0].options[index].status;
      if (index < 5) {
        this.lastest_order_time = ''

      } else {

        // this.isstatus=0

        this.lastest_order_time = subtractDaysAndFormat(item[0].options[index].status)
        console.log('日期', this.lastest_order_time)
      }
      console.log('两个status', item, this.isstatus, this.status)
      this.curTabIndex = item[0].value
      console.log('切换列表', this.curTabIndex)
      this.refresh();
    },
    lookDetails(device_sn) {
      uni.navigateTo({
        url:
          "/pagesB/device/DeviceGoodsList?from=replenish&device_sn=" +
          device_sn,
      });
    },
    onClickIcon(e) {
      if (e == 0) {
        uni.navigateTo({ url: "/pagesB/mapMode/MapMode?from=replenish" });
      } else if (e == 1) {
        this.isShowPopup = !this.isShowPopup;
      }
    },
    confirmScreenner(e) {
      console.log("🚀 ~ e", e);
      this.device_sn = e.device_sn;
      this.room_num = e.room_num;
      this.status = e.status;
      this.dianwei = e.dianwei;
      this.owner = e.owner;

      this.isShowPopup = false;

      // this.curTabIndex = 0;
      // let data = this.optionsList[0]
      // data.value = 0
      // data.title =
      //   this.optionsList[0].options[0].label;
      // console.log('tab切换', data)
      // let datalist = []
      // datalist[0] = data
      // this.changeDropdown(datalist)
      this.refresh();
    },
    search(e) {
      this.device_sn = e;

      this.refresh();
    },
    //点击扫码icon
    onClickScan(result) {
      if (!result) return this.isShowErr("请扫描正确二维码~");
      if (result.includes("device_sn")) {
        this.device_sn = getUrlDynamicData(result, "device_sn");
        this.refresh();
        this.device_sn = "";
      } else {
        this.isShowErr("请扫描正确二维码~");
      }
    },
  },
  onLoad(options) {
    /*  */
    console.log('option', options)
    if (options.status == 5) {
      let item = {
        label: "使用中",
        status: 5,
        value: 4
      }
      this.tabChange(4, item)
    } else {

      this.refresh();
    }
  },
  onShow(e) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; // 当前页
    console.log('是否返回', currPage.data.isDoRefresh)
    if (currPage.data.isDoRefresh == true) {
      // 是否刷新
      currPage.data.isDoRefresh = false;
      this.goodsName = "";
      this.refresh();
    }
    if (currPage.data.item && this.isShowPopup) {
      let checkHotel = currPage.data.item;
      this.$refs.DeviceScreener.hotelName = checkHotel.hotelName;
      this.$refs.DeviceScreener.hotel_id = checkHotel.id;
    }
  },

  mixins: [myPull()],

};
</script>

<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.linbuttom {
  height: 2rpx;
  background-color: rgb(206, 206, 206);
}
</style>